<template>
  <div class="review">
    <title-bar>
      <div class="top">
        <span>笔记跟新</span>
        <div>{{ reviewList.length }}条</div>
      </div>
    </title-bar>

    <div class="middle-input">
      <textarea
        class="input-textarea"
        type="textarea"
        minlength="1"
        maxlength="1000"
        v-model="textarea"
        placeholder="请输入内容"
        required>
      </textarea>
      <button class="input-button" @click="btnClick">记录</button>
    </div>
    <review-content>
      <review-item
        v-for="(item, index) in this.reviewList"
        :key="index"
        :itemInfo="item"
        @deleteClick="deleteClick(item)"
        >
        <template v-slot:content><div v-html="item.value"></div></template>
        <template v-slot:date>{{ item.date }}</template>
      </review-item>
    </review-content>
    <back-top @click.native="backTop" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import TitleBar from "../../components/titleBar/TitleBar.vue";
import ReviewContent from "./nextViewChild/ReviewContent.vue";
import ReviewItem from "./nextViewChild/ReviewItem.vue";
import BackTop from "../../components/backTop/BackTop.vue";
export default {
  data() {
    return {
      textarea: "",
      imd: 0,
      textareaValue: "",
      isShowBackTop: false,
      scrolltopnum: null,
      windowY: "",
    };
  },
  components: {
    TitleBar,
    ReviewContent,
    ReviewItem,
    BackTop,
  },

  computed: {
    reviewList() {
      return this.$store.state.reviewList;
    },
  },

  mounted() {
    // 监听scroll事件
    window.addEventListener("scroll", this.scrollHandle);
  },
  activated() {
    //展示保存文本框内容
    this.textarea = this.textareaContent;
    // this.windowY = document.documentElement.scrollTop
    document.documentElement.scrollTop = this.windowY;
    console.log(this.windowY);
  },
  deactivated() {
    //保存文本框内容
    this.textareaContent = this.textarea;
    this.windowY = document.documentElement.scrollTop;
    console.log(this.windowY);
  },
  destoryed() {
    window.removeEventListener("scroll", this.scrollHandle);
  },
  created() {},
  methods: {
    btnClick() {
      const reviewList = {};
      let times = new Date();
      let Y = times.getFullYear();
      let M = times.getMonth() + 1;
      M = M > 9 ? M : "0" + M;
      let D = times.getDate();
      D = D > 9 ? D : "0" + D;
      let h = times.getHours();
      h = h > 9 ? h : "0" + h;
      let m = times.getMinutes();
      m = m > 9 ? m : "0" + m;
      let date = h + ":" + m + " " + Y + "-" + M + "-" + D;
      // 保留textarea的换行和空格
      let textareaValue = this.textarea
        .replace(/<(.+?)>/gi, "&lt;$1&gt;")
        .replace(/ /gi, "&nbsp;")
        .replace(/\n/gi, "<br/>");
      // console.log(textareaValue);
      reviewList.value = textareaValue;
      reviewList.date = date;
      reviewList.imd = this.now();
      this.imd += 1;
      this.$store.dispatch("addReview", reviewList).then((res) => {
        console.log(res);
        // 提交到状态机后将文本域里的内容清空
        this.textarea = "";
      });
      console.log(this.reviewList);
    },

    now() {
      //id唯一 使用时间戳作为id标识
      return (Date.now && Date.now()) || new Date().getTime();
    },

    deleteClick(item) {
      this.$store.dispatch("deleteReview", item).then((res) => {
        console.log(res);
      });
    },

    //回到顶部图标显示隐藏
    scrollHandle() {
      // 拿到上卷长度
      this.scrolltopnum = document.documentElement.scrollTop;
      // console.log(this.scrolltopnum)
      if (this.scrolltopnum > 150) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },

    //回到顶部
    backTop() {
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrolltopnum / 5);
        document.documentElement.scrollTop = that.scrolltopnum + ispeed;
        if (that.scrolltopnum == 0) {
          clearInterval(timer);
        }
      }, 16);
    },
  },
};
</script>

<style lang="less" scoped>
.review {
  padding: 28px 0;
  position: relative;
}
.top {
  display: flex;
  position: relative;
  height: 40px;
  line-height: 40px;
  div {
    font-size: 20px;
    font-weight: 600;
    margin-left: 2px;
    color: rgb(250, 41, 76);
  }
}

.middle-input {
  margin: 10px 28px;
  padding: 12px 0;
  display: flex;
  background-color: rgb(241, 245, 248);
}
.input-textarea {
  flex: 80%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 14px;
  border-radius: 10px 0 0 10px;
  border: 1px solid #c8cccf;
  color: #6a6f77;
  outline: 0;
  resize: none;
  height: 40px;
  transition: all 1s ease;
}
.input-textarea:focus {
  border: 1px solid skyblue;
  height: 150px;
}
.input-button {
  flex: 20%;
  background-color: #17abe3;
  border: none;
  color: #fff;
  border-radius: 0 10px 10px 0;
}
.grey {
  background-color: #98daf3;
  color: #fff;
}

</style>